<template>
    <el-dialog
        class="dialog"
        title="解约"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-bwrap form-layer-top"
            labelPosition="top"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="租约编号:" prop="lease_no">
                <el-input v-model="formData.lease_no" readonly></el-input>
            </el-form-item>
            <el-form-item label="类型:" prop="jy_fee_type">
                <el-select
                    placeholder="请选择类型"
                    v-model="formData.jy_fee_type"
                >
                    <el-option
                        v-for="item in typeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="费用:" prop="jy_fee">
                <el-input-number
                    v-model="formData.jy_fee"
                    :min="0"
                    placeholder="请输入费用"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
                <el-input
                    type="textarea"
                    :rows="4"
                    resize="none"
                    maxlength="50"
                    show-word-limit
                    placeholder="请输入备注"
                    v-model="formData.remark"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: "RentContractDisengage",
    mixins: [mixinDialogForm]
})
export default class RentContractDisengage extends Vue {
    @Action("rentContract/disengage") itemEdit: any;
    init(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }
    typeData: any = [
        {
            label: "退款",
            value: "1"
        },
        {
            label: "补收",
            value: "2"
        }
    ];
    formData: any = {
        lease_no: "",
        lease_sn: "",
        jy_fee_type: "1",
        jy_fee: "",
        remark: ""
    };
    // 表单验证
    rules: any = {
        jy_fee_type: [
            {
                required: true,
                message: "请选择类型"
            }
        ],
        jy_fee: [
            {
                required: true,
                message: "请输入费用"
            }
        ]
    };
}
</script>